<template>
  <div class="user-register">
    <!-- 头部 -->

    <router-link to="account" slot="left">
      <mt-button icon="back"></mt-button>
    </router-link>

    <div class="bg">
      <div class="main">
        <!-- 标题文字 -->
        <h2>重置密码</h2>
        <!-- 文本框 -->
        <div class="medile">
          <mt-field
            type="password"
            placeholder="请输入新密码"
            v-model="pwd"
            :state="pwdState"
            @blur.native.capture="checkPwd"
          ></mt-field>
          <mt-field
            type="password"
            placeholder="请再次输入密码"
            v-model="repwd"
            :state="repwdState"
            @blur.native.capture="checkrepwd"
          ></mt-field>
        </div>

        <div style="margin: 16px">
          <van-button
            class="button-item"
            disabled="disabled"
            round
            block
            type="info"
            native-type="submit"
            @click="checkForm"
            >重置密码</van-button
          >
        </div>
      </div>
    </div>

    <div style="height: 70vh"></div>
  </div>
</template>

<style scoped>
/* 背景图 */
.bg {
  background-image: url(/regist/1.png);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: top;
  background-size: 99% 13.5rem;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;
}

/* 文本框和按钮 */
.main {
  width: 70vw;
  margin: 0 auto;
}
/* h2标题 */
.main > h2 {
  position: relative;
  font-weight: 700;
  font-size: 1.48rem;
  line-height: 0.58rem;
  color: #323232;
  z-index: 2;
  padding: 40px 0 10px 0;
}
/* 文本框 */
.main .medile {
  opacity: 0.7;
  border-radius: 10%;
}
.mint-cell-value > .mint-field-core {
  display: block;
  width: 100%;
  height: 1.2rem;
  border: 0 none;
  outline: none;
  font-size: 0.32rem;
  line-height: 1.2rem;
  color: #323232;
  background-color: transparent;
}
/* 同意图标 */
.agreement > em {
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  margin-right: 0.1rem;
  background-color: transparent;
  background-image: url(/regist/2.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  position: absolute;
  left: 70px;
  top: 293px;
}
/* 同意后面的文字 */
.agreement > span {
  font-size: 12px;
  line-height: 12px;
  color: #a8a8a8;
  position: absolute;
  left: 85px;
  top: 293px;
}
.agrennment span a {
  color: #6d6d6d;
}
/* button按钮 */
.van-button--info {
  margin-top: 40px;
  font-weight: bold;
  font-size: 1rem;
  line-height: 0.9rem;
  color: #323232;
  background-color: #fd6;
  border: 0px solid #fd6;
}
/* 按钮禁用 */
.van-button--disabled {
  color: #cccccc;
  background-color: #eeeeee;
}
/* 末尾的链接 */
.main .last {
  font-size: 0.28rem;
  color: #323232;
  position: absolute;
  left: 140px;
  top: 375px;
}
</style>

<script>
export default {
  data() {
    return {
      pwd: "",
      pwdState: "",
      repwd: "",
      repwdState: "",
    };
  },
  methods: {
    // 验证用户名密码
    checkPwd() {
      let reg = /^\d{6}$/;
      if (reg.test(this.pwd)) {
        this.pwdState = "success";
        return true;
      } else {
        this.pwdState = "error";
        return false;
      }
    },
    // 再次验证密码
    checkrepwd() {
      let reg = /^\d{6}$/;
      if (reg.test(this.repwd) && this.pwd == this.repwd) {
        this.repwdState = "success";
        return true;
      } else {
        this.repwdState = "error";
        return false;
      }
    },
    // 发送请求更改密码
    checkForm() {
      // if (this.checkName() && this.checkPwd() && this.checkrepwd()) {
      //   console.log(`发送请求，执行注册业务。。。`);
      //   // 发送post请求
      //   this.axios
      //     .post("/register", `username=${this.name}&password=${this.pwd}`)
      //     .then((res) => {
      //       console.log(res);
      //       if (res.data.code == 200) {
      //         //注册成功
      //         this.$toast("注册成功");
      //         this.$router.push("/login");
      //       } else if (res.data.code == 201) {
      //         //用户已存在
      //         this.$toast("用户注册失败，用户已存在");
      //       }
      //     });
      // }
    },
  },
};
</script>